<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="generator" content="VNote">

    <title>18_MVC模式</title>
    <link rel="icon" href="https://github.com/tamlok/vnote/raw/master/src/resources/icons/vnote.ico">

    <style type="text/css">
    /* STYLE_GLOBAL_PLACE_HOLDER */
    </style>

    <style type="text/css">
    *,
*::before,
*::after {
  box-sizing: border-box;
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 768px) {
    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
}

@media (min-width: 1200px) {
    .col-xl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

@media (min-width: 1200px) {
    .col-xl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
}

@media (min-width: 768px) {
    .pt-md-3, .py-md-3 {
        padding-top: 1rem!important;
    }
}

@media (min-width: 768px) {
    .pb-md-3, .py-md-3 {
        padding-bottom: 1rem!important;
    }
}

@media (min-width: 768px) {
    .pl-md-5, .px-md-5 {
        padding-left: 3rem!important;
    }
}

.d-none {
    display: none!important;
}

@media (min-width: 1200px) {
    .d-xl-block {
        display: block!important;
    }
}

@media (min-width: 768px) {
    .d-md-block {
        display: block!important;
    }
}

.bd-content {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
}

.bd-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 4rem;
    height: calc(100vh - 10rem);
    overflow-y: auto;
}

.bd-toc {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: .875rem;
}

.section-nav {
    padding-left: 0;
}

.section-nav ul {
    font-size: .875rem;
    list-style-type: none;
}

.section-nav li {
    font-size: .875rem;
}

.section-nav a {
    color: inherit !important;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 1200px) {
    .flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }
}

#floating-button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #00897B;
    position: fixed;
    top: .5rem;
    right: .5rem;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
}

#floating-button .more {
    color: #F5F5F5;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 2.5rem;
    font-size: 2rem;
    font-family: 'monospace';
    font-weight: 300;
}

.hide-none {
    display: none !important;
}

.col-expand {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 3rem !important;
}

.outline-bold {
    font-weight: bolder !important;
}

@media print {
    #floating-button {
        display: none !important;
    }
}

    @keyframes flash { 
  0% { color: rgb(128, 203, 196); }
  10% { color: rgb(0, 137, 123); }
  40% { color: rgb(0, 137, 123); }
  50% { color: rgb(128, 203, 196); }
  60% { color: rgb(0, 137, 123); }
  90% { color: rgb(0, 137, 123); }
}
.highlighted-anchor { animation: flash 1s; }
div.mark-rect { background: transparent; border: 5px solid rgb(87, 104, 196); border-radius: 2px; position: absolute; }
#vnote-footer { width: 100%; text-align: center; opacity: 0.2; margin-top: 3rem; }
#vnote-footer p { font-size: 0.8rem; }
#vnote-footer a { color: inherit !important; }
x-eqs { display: flex; flex-direction: row; align-content: space-between; align-items: center; }
x-eqs > x-eqn { width: 100%; margin-left: 3rem; }
x-eqs > span { text-align: right; }
.view-image, .view-svg { transition: 0.3s; }
.modal-box { display: none; position: fixed; z-index: 1000; padding-top: 50px; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background-color: rgba(68, 68, 68, 0.952941); }
.modal-content { margin: auto; display: block; width: auto; height: auto; cursor: move; }
.modal-content { animation-name: zoom; animation-duration: 0.6s; }
@-webkit-keyframes zoom { 
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes zoom { 
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
span.modal-close { position: absolute; z-index: 1000; top: 15px; right: 35px; color: rgb(218, 218, 218); font-size: 40px; font-weight: bold; transition: 0.3s; }
span.modal-close:hover, span.modal-close:focus { color: rgb(238, 238, 238); text-decoration: none; cursor: pointer; }
@media print {
  pre, pre code, td.hljs-ln-code { white-space: pre-wrap !important; word-break: break-all !important; }
  code, a { word-break: break-all !important; }
  div.flowchart-diagram, div.mermaid-diagram, div.plantuml-diagram { overflow: hidden !important; }
  img { max-width: 100% !important; height: auto !important; }
  #vnote-footer { display: none !important; }
}
.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-primary { color: rgb(0, 64, 133); background-color: rgb(204, 229, 255); border-color: rgb(184, 218, 255); }
.alert-secondary { color: rgb(56, 61, 65); background-color: rgb(226, 227, 229); border-color: rgb(214, 216, 219); }
.alert-success { color: rgb(21, 87, 36); background-color: rgb(212, 237, 218); border-color: rgb(195, 230, 203); }
.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235); }
.alert-warning { color: rgb(133, 100, 4); background-color: rgb(255, 243, 205); border-color: rgb(255, 238, 186); }
.alert-danger { color: rgb(114, 28, 36); background-color: rgb(248, 215, 218); border-color: rgb(245, 198, 203); }
.alert-light { color: rgb(129, 129, 130); background-color: rgb(254, 254, 254); border-color: rgb(253, 253, 254); }
.alert-dark { color: rgb(27, 30, 33); background-color: rgb(214, 216, 217); border-color: rgb(198, 200, 202); }
.vnote-anchor { font-weight: 400; color: rgba(0, 123, 255, 0.498039); transition: color 0.16s linear; padding-left: 0.375em; -webkit-font-smoothing: antialiased; text-decoration: none; opacity: 0; }
.vnote-anchor:hover { color: rgb(0, 123, 255); text-decoration: none; opacity: 1; }
.vnote-anchor::after { content: attr(data-anchor-icon); }
.vnote-btn { position: relative; display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; border: none; user-select: none; -webkit-appearance: none; }
.vnote-copy-clipboard-btn { transition: opacity 0.3s ease-in-out; opacity: 0; padding: 2px 6px; position: absolute; top: 5px; right: 5px; }
pre:hover .vnote-copy-clipboard-btn { opacity: 1; }
pre.vnote-snippet { position: relative; }
body { margin: 0px auto; font-family: "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "Hiragino Sans GB", 冬青黑体, "Microsoft YaHei", 微软雅黑, "Microsoft YaHei UI", "WenQuanYi Micro Hei", 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, "Liberation Sans", "Droid Sans", NSimSun, 新宋体, SimSun, 宋体; color: rgb(34, 34, 34); line-height: 1.5; padding: 15px; background: rgb(238, 238, 238); font-size: 16px; }
h1, h2, h3, h4, h5, h6 { color: rgb(34, 34, 34); font-weight: bold; margin-top: 20px; margin-bottom: 10px; padding: 0px; }
p { padding: 0px; margin-top: 16px; margin-bottom: 16px; }
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 19px; }
h6 { font-size: 18px; }
a { color: rgb(0, 153, 255); margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: none; word-break: break-word; }
a:hover { text-decoration: underline; color: rgb(255, 102, 0); }
a:visited { color: purple; }
ul, ol { padding: 0px 0px 0px 24px; }
li { line-height: 24px; }
li ul, li ol { margin-left: 16px; }
p, ul, ol { font-size: 16px; line-height: 24px; }
pre { display: block; overflow-y: hidden; overflow-x: auto; tab-size: 4; }
code { font-family: Consolas, Monaco, monospace, Courier; color: rgb(142, 36, 170); word-break: break-word; }
pre code { display: block; overflow-x: auto; padding: 0.5em; color: rgb(34, 34, 34); background-color: rgb(224, 224, 224); border-left: 0.5em solid rgb(0, 137, 123); line-height: 1.5; font-family: Consolas, Monaco, monospace, Courier; white-space: pre; tab-size: 4; }
pre code.markdown-metadata { border-left: 0.5em solid rgb(128, 203, 196); }
aside { display: block; float: right; width: 390px; }
blockquote { color: rgb(102, 102, 102); border-left: 0.5em solid rgb(122, 122, 122); padding: 0px 1em; margin-left: 0px; }
blockquote p { color: rgb(102, 102, 102); }
hr { display: block; text-align: left; margin: 1em 0px; border: none; height: 2px; background: rgb(153, 153, 153); }
table { padding: 0px; margin: 1rem 0.5rem; border-collapse: collapse; }
table tr { border-top: 2px solid rgb(204, 204, 204); background-color: white; margin: 0px; padding: 0px; }
table tr:nth-child(2n) { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border: 2px solid rgb(204, 204, 204); margin: 0px; padding: 6px 13px; }
table tr td { border: 2px solid rgb(204, 204, 204); margin: 0px; padding: 6px 13px; }
table tr th :first-child, table tr td :first-child { margin-top: 0px; }
table tr th :last-child, table tr td :last-child { margin-bottom: 0px; }
div.mermaid-diagram { margin: 16px 0px; overflow-y: hidden; }
div.flowchart-diagram { padding: 0px 5px; margin: 16px 0px; width: fit-content; overflow: hidden; }
div.wavedrom-diagram { padding: 0px 5px; margin: 16px 0px; width: fit-content; overflow: hidden; }
div.plantuml-diagram { padding: 5px 5px 0px; margin: 16px 0px; width: fit-content; overflow: hidden; }
.img-package { text-align: center; }
img.img-center { display: block; margin-left: auto; margin-right: auto; }
span.img-caption { min-width: 20%; max-width: 80%; display: inline-block; padding: 10px; margin: 0px auto; border-bottom: 1px solid rgb(192, 192, 192); color: rgb(108, 108, 108); text-align: center; line-height: 1.5; }
.emoji_zero, .emoji_one, .emoji_two, .emoji_three, .emoji_four, .emoji_five, .emoji_six, .emoji_seven, .emoji_eight, .emoji_nine { margin-left: 5px; margin-right: 8px; }
div.preview-hint { opacity: 0.5; margin-top: 30%; margin-bottom: 30%; align-items: center; display: flex; flex-direction: column; justify-content: center; }
table.hljs-ln tr { border: none; background-color: transparent; }
table.hljs-ln tr td { border: none; background-color: transparent; }
table.hljs-ln tr td.hljs-ln-numbers { user-select: none; text-align: center; color: rgb(170, 170, 170); border-right: 1px solid rgb(204, 204, 204); vertical-align: top; padding-right: 5px; white-space: nowrap; }
table.hljs-ln tr td.hljs-ln-code { padding-left: 10px; }
::-webkit-scrollbar { background-color: rgb(234, 234, 234); width: 14px; height: 14px; border: none; }
::-webkit-scrollbar-corner { background-color: rgb(234, 234, 234); }
::-webkit-scrollbar-button { height: 14px; width: 14px; background-color: rgb(234, 234, 234); }
::-webkit-scrollbar-button:hover { background-color: rgb(208, 208, 208); }
::-webkit-scrollbar-button:active { background-color: rgb(178, 178, 178); }
::-webkit-scrollbar-track { background-color: rgb(234, 234, 234); }
::-webkit-scrollbar-thumb { border: none; background-color: rgb(218, 218, 218); }
::-webkit-scrollbar-thumb:hover { background-color: rgb(208, 208, 208); }
::-webkit-scrollbar-thumb:active { background-color: rgb(178, 178, 178); }
::-webkit-scrollbar-button:horizontal:increment { background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g>    <g transform="rotate(-90 256.00000000000006,256) " id="svg_1">   <polygon fill="%23333333" id="svg_2" points="128,192 256,320 384,192  "/>  </g> </g></svg>'); background-repeat: no-repeat; background-size: contain; }
::-webkit-scrollbar-button:horizontal:decrement { background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g>    <g transform="rotate(90 255.99999999999997,256.00000000000006) " id="svg_1">   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="%23333333"/>  </g> </g></svg>'); background-repeat: no-repeat; background-size: contain; }
::-webkit-scrollbar-button:vertical:increment { background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g>    <g transform="null" id="svg_1">   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="%23333333"/>  </g> </g></svg>'); background-repeat: no-repeat; background-size: contain; }
::-webkit-scrollbar-button:vertical:decrement { background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g>    <g transform="rotate(180 255.99999999999997,256) " id="svg_1">   <polygon points="128,192 256,320 384,192  " id="svg_2" fill="%23333333"/>  </g> </g></svg>'); background-repeat: no-repeat; background-size: contain; }
::selection { background: rgb(25, 118, 210); color: rgb(238, 238, 238); }
.modal-box { background-color: rgba(234, 234, 234, 0.952941); }
span.modal-close { color: rgb(102, 102, 102); }
span.modal-close:hover, span.modal-close:focus { color: rgb(34, 34, 34); }
.hljs { display: block; overflow-x: auto; padding: 0.5em; background: rgb(224, 224, 224); }
.hljs, .hljs-subst { color: rgb(54, 54, 54); }
.hljs-comment { color: rgb(118, 118, 118); }
.hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name { color: rgb(0, 0, 238); }
.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: rgb(136, 0, 0); }
.hljs-title, .hljs-section { color: rgb(136, 0, 0); font-weight: bold; }
.hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo { color: rgb(188, 96, 96); }
.hljs-literal { color: rgb(175, 0, 215); }
.hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition { color: rgb(0, 135, 0); }
.hljs-meta { color: rgb(31, 113, 153); }
.hljs-meta-string { color: rgb(77, 153, 191); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.mermaid-diagram .mermaid .label { color: rgb(51, 51, 51); }
.mermaid-diagram .node rect, .mermaid-diagram .node circle, .mermaid-diagram .node ellipse, .mermaid-diagram .node polygon { fill: rgb(236, 236, 255); stroke: rgb(204, 204, 255); stroke-width: 1px; }
.mermaid-diagram .edgePath .path { stroke: rgb(51, 51, 51); }
.mermaid-diagram .edgeLabel { background-color: rgb(232, 232, 232); }
.mermaid-diagram .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4 !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }
.mermaid-diagram .cluster text { fill: rgb(51, 51, 51); }
.mermaid-diagram .actor { stroke: rgb(204, 204, 255); fill: rgb(236, 236, 255); }
.mermaid-diagram text.actor { fill: black; stroke: none; }
.mermaid-diagram .actor-line { stroke: grey; }
.mermaid-diagram .messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51); }
.mermaid-diagram .messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51); }
.mermaid-diagram #arrowhead { fill: rgb(51, 51, 51); }
.mermaid-diagram #crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important; }
.mermaid-diagram .messageText { fill: rgb(51, 51, 51); stroke: none; }
.mermaid-diagram .labelBox { stroke: rgb(204, 204, 255); fill: rgb(236, 236, 255); }
.mermaid-diagram .labelText { fill: black; stroke: none; }
.mermaid-diagram .loopText { fill: black; stroke: none; }
.mermaid-diagram .loopLine { stroke-width: 2; stroke: rgb(204, 204, 255); }
.mermaid-diagram .note { stroke: rgb(170, 170, 51); fill: rgb(255, 245, 173); }
.mermaid-diagram .noteText { fill: black; stroke: none; font-family: "trebuchet ms", verdana, arial; font-size: 14px; }
.mermaid-diagram .section { stroke: none; opacity: 0.2; }
.mermaid-diagram .section0 { fill: rgba(102, 102, 255, 0.490196); }
.mermaid-diagram .section2 { fill: rgb(255, 244, 0); }
.mermaid-diagram .section1, .mermaid-diagram .section3 { fill: white; opacity: 0.2; }
.mermaid-diagram .sectionTitle0 { fill: rgb(51, 51, 51); }
.mermaid-diagram .sectionTitle1 { fill: rgb(51, 51, 51); }
.mermaid-diagram .sectionTitle2 { fill: rgb(51, 51, 51); }
.mermaid-diagram .sectionTitle3 { fill: rgb(51, 51, 51); }
.mermaid-diagram .sectionTitle { text-anchor: start; font-size: 11px; }
.mermaid-diagram .grid .tick { stroke: lightgrey; opacity: 0.3; shape-rendering: crispEdges; }
.mermaid-diagram .grid path { stroke-width: 0; }
.mermaid-diagram .today { fill: none; stroke: red; stroke-width: 2px; }
.mermaid-diagram .task { stroke-width: 2; }
.mermaid-diagram .taskText { text-anchor: middle; font-size: 11px; }
.mermaid-diagram .taskTextOutsideRight { fill: black; text-anchor: start; font-size: 11px; }
.mermaid-diagram .taskTextOutsideLeft { fill: black; text-anchor: end; font-size: 11px; }
.mermaid-diagram .taskText0, .mermaid-diagram .taskText1, .mermaid-diagram .taskText2, .mermaid-diagram .taskText3 { fill: white; }
.mermaid-diagram .task0, .mermaid-diagram .task1, .mermaid-diagram .task2, .mermaid-diagram .task3 { fill: rgb(138, 144, 221); stroke: rgb(83, 79, 188); }
.mermaid-diagram .taskTextOutside0, .mermaid-diagram .taskTextOutside2 { fill: black; }
.mermaid-diagram .taskTextOutside1, .mermaid-diagram .taskTextOutside3 { fill: black; }
.mermaid-diagram .active0, .mermaid-diagram .active1, .mermaid-diagram .active2, .mermaid-diagram .active3 { fill: rgb(191, 199, 255); stroke: rgb(83, 79, 188); }
.mermaid-diagram .activeText0, .mermaid-diagram .activeText1, .mermaid-diagram .activeText2, .mermaid-diagram .activeText3 { fill: black !important; }
.mermaid-diagram .done0, .mermaid-diagram .done1, .mermaid-diagram .done2, .mermaid-diagram .done3 { stroke: grey; fill: lightgrey; stroke-width: 2; }
.mermaid-diagram .doneText0, .mermaid-diagram .doneText1, .mermaid-diagram .doneText2, .mermaid-diagram .doneText3 { fill: black !important; }
.mermaid-diagram .crit0, .mermaid-diagram .crit1, .mermaid-diagram .crit2, .mermaid-diagram .crit3 { stroke: rgb(255, 136, 136); fill: red; stroke-width: 2; }
.mermaid-diagram .activeCrit0, .mermaid-diagram .activeCrit1, .mermaid-diagram .activeCrit2, .mermaid-diagram .activeCrit3 { stroke: rgb(255, 136, 136); fill: rgb(191, 199, 255); stroke-width: 2; }
.mermaid-diagram .doneCrit0, .mermaid-diagram .doneCrit1, .mermaid-diagram .doneCrit2, .mermaid-diagram .doneCrit3 { stroke: rgb(255, 136, 136); fill: lightgrey; stroke-width: 2; cursor: pointer; shape-rendering: crispEdges; }
.mermaid-diagram .doneCritText0, .mermaid-diagram .doneCritText1, .mermaid-diagram .doneCritText2, .mermaid-diagram .doneCritText3 { fill: black !important; }
.mermaid-diagram .activeCritText0, .mermaid-diagram .activeCritText1, .mermaid-diagram .activeCritText2, .mermaid-diagram .activeCritText3 { fill: black !important; }
.mermaid-diagram .titleText { text-anchor: middle; font-size: 18px; fill: black; }
.mermaid-diagram .node text { font-family: "trebuchet ms", verdana, arial; font-size: 14px; }
.mermaid-diagram div.mermaidTooltip { position: absolute; text-align: center; max-width: 200px; padding: 2px; font-family: "trebuchet ms", verdana, arial; font-size: 12px; background: rgb(255, 255, 222); border: 1px solid rgb(170, 170, 51); border-radius: 2px; pointer-events: none; z-index: 100; }
#mermaid-diagram-1 .node > rect { }
#mermaid-diagram-1 .node text { fill: rgb(0, 0, 0); stroke: none; font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; }
#mermaid-diagram-1 .edgeLabel text { fill: rgb(0, 0, 0); stroke: none; font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; }
#mermaid-diagram-1 .cluster rect { fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
#mermaid-diagram-1 .cyan > rect, .cyan > polygon, .cyan > circle, .cyan > ellipse { fill: rgb(153, 255, 255); stroke: rgb(255, 255, 255); }

    </style>

    <script type="text/javascript">
var toc = [];

var setVisible = function(node, visible) {
    var cl = 'hide-none';
    if (visible) {
        node.classList.remove(cl);
    } else {
        node.classList.add(cl);
    }
};

var isVisible = function(node) {
    var cl = 'hide-none';
    return !node.classList.contains(cl);
};

var setPostContentExpanded = function(node, expanded) {
    var cl = 'col-expand';
    if (expanded) {
        node.classList.add(cl);
    } else {
        node.classList.remove(cl);
    }
};

var setOutlinePanelVisible = function(visible) {
    var outlinePanel = document.getElementById('outline-panel');
    var postContent = document.getElementById('post-content');

    setVisible(outlinePanel, visible);
    setPostContentExpanded(postContent, !visible);
};

var isOutlinePanelVisible = function() {
    var outlinePanel = document.getElementById('outline-panel');
    return isVisible(outlinePanel);
};

window.addEventListener('load', function() {
    var outlinePanel = document.getElementById('outline-panel');
    outlinePanel.style.display = 'initial';

    var floatingContainer = document.getElementById('container-floating');
    floatingContainer.style.display = 'initial';

    var outlineContent = document.getElementById('outline-content');
    var postContent = document.getElementById('post-content');

    // Escape @text to Html.
    var escapeHtml = function(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };

        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    // Fetch the outline.
    var headers = postContent.querySelectorAll("h1, h2, h3, h4, h5, h6");
    toc = [];
    for (var i = 0; i < headers.length; ++i) {
        var header = headers[i];

        toc.push({
            level: parseInt(header.tagName.substr(1)),
            anchor: header.id,
            title: escapeHtml(header.textContent)
        });
    }

    if (toc.length == 0) {
        setOutlinePanelVisible(false);
        setVisible(floatingContainer, false);
        return;
    }

    var baseLevel = baseLevelOfToc(toc);
    var tocTree = tocToTree(toPerfectToc(toc, baseLevel), baseLevel);

    outlineContent.innerHTML = tocTree;
    setOutlinePanelVisible(true);
    setVisible(floatingContainer, true);
});

// Return the topest level of @toc, starting from 1.
var baseLevelOfToc = function(p_toc) {
    var level = -1;
    for (i in p_toc) {
        if (level == -1) {
            level = p_toc[i].level;
        } else if (level > p_toc[i].level) {
            level = p_toc[i].level;
        }
    }

    if (level == -1) {
        level = 1;
    }

    return level;
};

// Handle wrong title levels, such as '#' followed by '###'
var toPerfectToc = function(p_toc, p_baseLevel) {
    var i;
    var curLevel = p_baseLevel - 1;
    var perfToc = [];
    for (i in p_toc) {
        var item = p_toc[i];

        // Insert empty header.
        while (item.level > curLevel + 1) {
            curLevel += 1;
            var tmp = { level: curLevel,
                        anchor: '',
                        title: '[EMPTY]'
                      };
            perfToc.push(tmp);
        }

        perfToc.push(item);
        curLevel = item.level;
    }

    return perfToc;
};

var itemToHtml = function(item) {
    return '<a href="#' + item.anchor + '" data="' + item.anchor + '">' + item.title + '</a>';
};

// Turn a perfect toc to a tree using <ul>
var tocToTree = function(p_toc, p_baseLevel) {
    var i;
    var front = '<li>';
    var ending = ['</li>'];
    var curLevel = p_baseLevel;
    for (i in p_toc) {
        var item = p_toc[i];
        if (item.level == curLevel) {
            front += '</li>';
            front += '<li>';
            front += itemToHtml(item);
        } else if (item.level > curLevel) {
            // assert(item.level - curLevel == 1)
            front += '<ul>';
            ending.push('</ul>');
            front += '<li>';
            front += itemToHtml(item);
            ending.push('</li>');
            curLevel = item.level;
        } else {
            while (item.level < curLevel) {
                var ele = ending.pop();
                front += ele;
                if (ele == '</ul>') {
                    curLevel--;
                }
            }
            front += '</li>';
            front += '<li>';
            front += itemToHtml(item);
        }
    }
    while (ending.length > 0) {
        front += ending.pop();
    }
    front = front.replace("<li></li>", "");
    front = '<ul>' + front + '</ul>';
    return front;
};

var toggleMore = function() {
    if (toc.length == 0) {
        return;
    }

    var p = document.getElementById('floating-more');
    if (isOutlinePanelVisible()) {
        p.textContent = '<';
        setOutlinePanelVisible(false);
    } else {
        p.textContent = '>';
        setOutlinePanelVisible(true);
    }
};

window.addEventListener('scroll', function() {
    if (toc.length == 0 || !isOutlinePanelVisible()) {
        return;
    }

    var postContent = document.getElementById('post-content');
    var scrollTop = document.documentElement.scrollTop
                    || document.body.scrollTop
                    || window.pageYOffset;
    var eles = postContent.querySelectorAll("h1, h2, h3, h4, h5, h6");

    if (eles.length == 0) {
        return;
    }

    var idx = -1;
    var biaScrollTop = scrollTop + 50;
    for (var i = 0; i < eles.length; ++i) {
        if (biaScrollTop >= eles[i].offsetTop) {
            idx = i;
        } else {
            break;
        }
    }

    var header = '';
    if (idx != -1) {
        header = eles[idx].id;
    }

    highlightItemOnlyInOutline(header);
});

var highlightItemOnlyInOutline = function(id) {
    var cl = 'outline-bold';
    var outlineContent = document.getElementById('outline-content');
    var eles = outlineContent.querySelectorAll("a");
    var target = null;
    for (var i = 0; i < eles.length; ++i) {
        var ele = eles[i];
        if (ele.getAttribute('data') == id) {
            target = ele;
            ele.classList.add(cl);
        } else {
            ele.classList.remove(cl);
        }
    }

    // TODO: scroll target into view within the outline panel scroll area.
};

</script>


<!-- HEAD_PLACE_HOLDER -->
</head>
<body>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
    <div id="outline-panel" style="display:none;" class="d-none d-md-block d-xl-block col-md-3 col-xl-2 bd-toc">
        <div id="outline-content" class="section-nav"></div>
    </div>
    <div id="post-content" class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
    <div style="page-break-after: always;"></div>
<h1 id="toc_0">18. MVC模式<a class="vnote-anchor" href="#toc_0" data-anchor-icon="#"></a></h1>
<p><img src="https://github.com/wai818/mORMot-Learning/blob/master/mORMot_Picture/cartoon08.png?raw=true" alt="" class="view-image"></p>
<p>  mORMot框架支持编写富Web MVC应用程序，依靠常规的ORM和SOA方法来实现其业务模型及其应用程序层，并为HTML呈现提供可选的专用MVC模型。</p>
<h2 id="toc_1">18.1. 模型<a class="vnote-anchor" href="#toc_1" data-anchor-icon="#"></a></h2>
<p>  根据模型-视图-控制器（MVC）模式，请参<a href="">阅模型-视图-控制器</a>，数据库模式应与用户界面分开处理。</p>
<p>  TSQLModel类集中了应用程序所需的所有TSQLRecord继承类，包括数据库相关和业务逻辑相关。</p>
<p>  有关如何定义应用程序模型的信息，请参阅<a href="">ORM数据模型</a>。</p>
<h2 id="toc_2">18.2. 视图<a class="vnote-anchor" href="#toc_2" data-anchor-icon="#"></a></h2>
<p>  mORMot框架可以生成两种用户界面，对应于MVC视图：</p>
<ul>
<li>对于使用Delphi编写的桌面客户端，它允许创建类似于Ribbon的界面，具有完整数据视图和导航作为可视表格，报告和编辑窗口可以自动生成。整个用户界面是通过在代码中定义的一些常量来设计的。</li>
<li>对于Web客户端，已经集成了纯Delphi的优化的Mustache模板引擎，并且可以使用清晰的MVC设计轻松创建HTML视图。</li>
</ul>
<div class="mermaid-diagram"><svg id="mermaid-diagram-1" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 682.5 679" style="max-width:682.5px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaid-diagram-1 .node&gt;rect { ; }
#mermaid-diagram-1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaid-diagram-1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaid-diagram-1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
#mermaid-diagram-1 .cyan&gt;rect, .cyan&gt;polygon, .cyan&gt;circle, .cyan&gt;ellipse { fill:#9ff;  stroke:#fff; }
/*  */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph4" transform="translate(430.5,592)" style="opacity: 1;"><rect width="154" height="94" x="-77" y="-47"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"></div></foreignObject></g></g><text x="0" y="-33" fill="black" stroke="none" id="mermaid-diagram-1Text" style="text-anchor: middle;"> DB Server</text></g><g class="cluster" id="subGraph3" transform="translate(124.5,223)" style="opacity: 1;"><rect width="209" height="118" x="-104.5" y="-59"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"></div></foreignObject></g></g><text x="0" y="-45" fill="black" stroke="none" id="mermaid-diagram-1Text" style="text-anchor: middle;"> Rich Client 3</text></g><g class="cluster" id="subGraph2" transform="translate(430.5,329.5)" style="opacity: 1;"><rect width="363" height="331" x="-181.5" y="-165.5"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"></div></foreignObject></g></g><text x="0" y="-151.5" fill="black" stroke="none" id="mermaid-diagram-1Text" style="text-anchor: middle;"> Server</text></g><g class="cluster" id="subGraph1" transform="translate(546.5,67)" style="opacity: 1;"><rect width="192" height="94" x="-96" y="-47"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"></div></foreignObject></g></g><text x="0" y="-33" fill="black" stroke="none" id="mermaid-diagram-1Text" style="text-anchor: middle;"> Web client 2</text></g><g class="cluster" id="subGraph0" transform="translate(334.5,67)" style="opacity: 1;"><rect width="192" height="94" x="-96" y="-47"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"></div></foreignObject></g></g><text x="0" y="-33" fill="black" stroke="none" id="mermaid-diagram-1Text" style="text-anchor: middle;"> Web client 1</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M334.5,89L334.5,114L334.5,139L334.5,164L379.41525423728814,189" marker-end="url(#arrowhead96)" style="fill:none"></path><defs><marker id="arrowhead96" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M546.5,89L546.5,114L546.5,139L546.5,164L501.58474576271186,189" marker-end="url(#arrowhead97)" style="fill:none"></path><defs><marker id="arrowhead97" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M124.5,257L124.5,282L314.5,307L376.20212765957444,332" marker-end="url(#arrowhead98)" style="fill:none"></path><defs><marker id="arrowhead98" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M440.5,257L440.5,282L440.5,307L435.1808510638298,332" marker-end="url(#arrowhead99)" style="fill:none"></path><defs><marker id="arrowhead99" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M430.5,376L430.5,401L430.5,426" marker-end="url(#arrowhead100)" style="fill:none"></path><defs><marker id="arrowhead100" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M430.5,470L430.5,495L430.5,520L430.5,545L430.5,570" marker-end="url(#arrowhead101)" style="fill:none"></path><defs><marker id="arrowhead101" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node cyan" id="D" transform="translate(430.5,592)" style="opacity: 1;"><rect rx="0" ry="0" x="-42" y="-22" width="84" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-32,-12)"><foreignObject width="64" height="24"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Data Tier</div></foreignObject></g></g></g><g class="node cyan" id="C3" transform="translate(124.5,223)" style="opacity: 1;"><rect rx="0" ry="0" x="-69.5" y="-34" width="139" height="68"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-59.5,-24)"><foreignObject width="119" height="48"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">FMX<br>Presentation Tier</div></foreignObject></g></g></g><g class="node cyan" id="S1" transform="translate(440.5,223)" style="opacity: 1;"><rect rx="0" ry="0" x="-69.5" y="-34" width="139" height="68"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-59.5,-24)"><foreignObject width="119" height="48"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Web<br>Presentation Tier</div></foreignObject></g></g></g><g class="node cyan" id="S2" transform="translate(430.5,354)" style="opacity: 1;"><rect rx="0" ry="0" x="-65.5" y="-22" width="131" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-55.5,-12)"><foreignObject width="111" height="24"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Application Tier</div></foreignObject></g></g></g><g class="node cyan" id="S3" transform="translate(430.5,448)" style="opacity: 1;"><rect rx="0" ry="0" x="-76" y="-22" width="152" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-66,-12)"><foreignObject width="132" height="24"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Business Logic Tier</div></foreignObject></g></g></g><g class="node cyan" id="C2" transform="translate(546.5,67)" style="opacity: 1;"><rect rx="0" ry="0" x="-61" y="-22" width="122" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-51,-12)"><foreignObject width="102" height="24"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">HTML Browser</div></foreignObject></g></g></g><g class="node cyan" id="C1" transform="translate(334.5,67)" style="opacity: 1;"><rect rx="0" ry="0" x="-61" y="-22" width="122" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-51,-12)"><foreignObject width="102" height="24"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">HTML Browser</div></foreignObject></g></g></g></g></g></g></svg></div>
<p>  Web Presentation Tier将在后面详述，我们现在将介绍项目范围的实施方案。</p>
<h3 id="toc_3">18.2.1. 桌面客户端<a class="vnote-anchor" href="#toc_3" data-anchor-icon="#"></a></h3>
<h4 id="toc_4">18.2.1.1. RTTI<a class="vnote-anchor" href="#toc_4" data-anchor-icon="#"></a></h4>
<p>  Delphi语言（又名Object Pascal）在十多年前提供了运行时类型信息（RTTI）。简而言之，运行时类型信息是有关在运行时设置到内存中的对象数据类型的信息。 Delphi中的RTTI支持首先被添加到允许设计时环境完成其工作，但开发人员也可以利用它来实现某些代码简化。我们的框架大量使用RTTI，从数据库级到用户界面。因此，生成的程序具有快速开发（类似Rails）的优点，但具有强类型语法的稳健性，以及可用的最佳编译器速度。</p>
<p>  简而言之，它允许从代码本身中提取软件逻辑。以下是使用此技术的地方：</p>
<ul>
<li>所有数据库结构都是通过普通类定义在代码中设置的，并且大多数所需的SQL代码都是在调用SQLite3数据库引擎之前由框架动态创建的，从而产生真正的对象关系映射（ORM）框架；</li>
<li>所有用户界面都是由代码生成的，使用一些简单的数据结构，依赖于枚举；</li>
<li>由于Camel方法，屏幕上显示的大部分文本都依赖于RTTI，随时可以翻译成本地语言；</li>
<li>所有内部事件过程（例如按下按钮）都依赖于枚举RTTI；</li>
<li>选项和程序参数使用RTTI进行数据持久性和屏幕显示（如程序的“设置”窗口可以通过纯代码创建）：添加选项只需几行代码即可。</li>
</ul>
<p>  在Delphi中，枚举类型提供了一种定义值列表的方法。这些值没有固有的含义，它们的标准遵循列出标识符的顺序。这些值在代码中写入一次，然后在程序中的任何位置使用，甚至用于生成用户界面。</p>
<p>  例如，某些工具栏操作可以使用以下内容定义：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">type</span>
  <span class="hljs-comment">/// item toolbar actions</span>
  TBabyAction = (
    paCreateNew, paDelete, paEdit, paQuit);
</code></pre>
<p>  然后，这个TBabyAction枚举类型用于创建主窗口的用户界面功能区，只需创建一个这种类型的数组：</p>
<pre><code class="lang-pascal hljs">BarEdit: <span class="hljs-keyword">array</span>[<span class="hljs-number">0</span>..<span class="hljs-number">1</span>] <span class="hljs-keyword">of</span> <span class="hljs-keyword">set</span> <span class="hljs-keyword">of</span> TBabyAction = (
    [paCreateNew, paDelete, paEdit],
    [paQuit] );
</code></pre>
<p>  然后框架使用“Camel Case”提取要在屏幕上显示的按钮的标题：由源代码中的paCreateNew标识符定义的第二个按钮在屏幕上显示为"Create new" ，并且"Create new" 直接用于软件的i18n。有关“Camel Case”及其在Object Pascal、Java、Dot Net、Python中的用法的更多信息，请参阅http://en.wikipedia.org/wiki/CamelCase</p>
<p>  因此，RTTI的优点可以归结为：</p>
<ul>
<li>软件可维护性，因为整个程序逻辑是基于代码的，并且用户界面是从它创建的。因此，它避免了RAD（快速应用程序开发）滥用，它将用户界面与数据逻辑混合在一起，并可能导致“快速编写，努力维护”的情况;</li>
<li>由于Object Pascal强类型语法，增强了代码安全性;</li>
<li>从语言对象模型直接访问数据库，无需编写SQL或使用MVC框架;</li>
<li>用户界面一致性，因为大多数屏幕都是即时创建的;</li>
<li>易于i18n的软件，无需额外的组件或系统。</li>
</ul>
<h4 id="toc_5">18.2.1.2. 用户界面<a class="vnote-anchor" href="#toc_5" data-anchor-icon="#"></a></h4>
<p>  在演示主示例应用程序设计期间，从RTTI生成用户界面和报表集成功能将在下面阐述。</p>
<p>  简而言之，包括用户界面自动创建在内的这种复杂模型可以这样编写，从单元<code>FileTables.pas</code>中提取：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CreateFileModel</span><span class="hljs-params">(Owner: TSQLRest)</span>:</span> TSQLModel;
<span class="hljs-keyword">begin</span>
  result := TSQLModel.Create(Owner,
    @FileTabs,length(FileTabs),sizeof(FileTabs[<span class="hljs-number">0</span>]),[],
    TypeInfo(TFileAction),TypeInfo(TFileEvent));
<span class="hljs-keyword">end</span>;
</code></pre>
<p>  所有需要的<code>TSQLRecord</code>类都在常量数组中声明:</p>
<pre><code class="lang-pascal hljs"> FileTabs: <span class="hljs-keyword">array</span>[<span class="hljs-number">0</span>..<span class="hljs-number">4</span>] <span class="hljs-keyword">of</span> TFileRibbonTabParameters = ( ...
</code></pre>
<p>  并将使用<code>TFileAction</code>/<code>TFileEvent</code>枚举类型来处理用户界面活动和业务逻辑。</p>
<h3 id="toc_6">18.2.2. Web客户端<a class="vnote-anchor" href="#toc_6" data-anchor-icon="#"></a></h3>
<h4 id="toc_7">18.2.2.1. Mustache模板引擎<a class="vnote-anchor" href="#toc_7" data-anchor-icon="#"></a></h4>
<p>  Mustache，请参阅http://mustache.github.io，是一个众所周知的无逻辑模板引擎。</p>
<p>  有很多开源实现（包括JavaScript，对于客户端的AJAX应用程序来说非常方便）。对于mORMot，我们创建了它的第一个纯Delphi实现，与框架的其他模块完美集成。</p>
<p>  一般来说，模板系统可用于规范分离输出格式，这些规范控制输出文本和数据元素的外观和位置，从执行逻辑准备数据和决定在输出中出现的内容。</p>
<p>  大多数模板系统（例如PHP，smarty，Razor ......）实际上都是模板内容中的完整脚本引擎。它允许在HTML内容中使用强大的结构，如变量赋值或条件语句。它可以轻松地独立修改模板系统中应用程序的外观，而无需修改任何底层的“应用程序逻辑”。然而，他们这样做是以分离为代价，将模板本身转变为应用程序逻辑的一部分。</p>
<p>  Mustache继承自Google的ctemplate库，并在许多著名应用程序中使用，包括Google网络搜索或Twitter网站。</p>
<p>  Mustache模板系统倾向于保持逻辑和表示的分离，因此确保了完美的MVC设计（<a href="">模型-视图-控制器</a>），并能够使用SOA服务。</p>
<p>  Mustache被特意限制在它支持的功能中，因此，应用程序往往需要相当多的代码来实例化模板：所有应用程序逻辑都将在控制器代码中定义，而不是在视图中定义。这可能不是每个人的口味。但是，虽然此设计限制了模板语言的功能，但它并不限制模板系统的功能或灵活性。该系统支持任意复杂的文本格式。</p>
<p>  最后，Mustache的设计注重效率。模板实例化非常快，着眼于最小化内存使用和内存碎片。因此，它看起来像是我们的mORMot框架的完美模板系统。</p>
<h4 id="toc_8">18.2.2.2. Mustache原理<a class="vnote-anchor" href="#toc_8" data-anchor-icon="#"></a></h4>
<p>  Mustache模板系统有两个主要部分：</p>
<ul>
<li>模板（纯文本文件）;</li>
<li>数据字典（又名上下文）。</li>
</ul>
<p>  例如，给出以下模板：</p>
<pre><code class="lang-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{header}}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>

{{#items}}
  {{#first}}
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  {{/first}}
  {{#link}}
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"{{url}}"</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  {{/link}}
{{/items}}

{{#empty}}
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The list is empty.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
{{/empty}}
</code></pre>
<p>  以及以下数据上下文：</p>
<pre><code class="lang-json hljs">{
  <span class="hljs-attr">"header"</span>: <span class="hljs-string">"Colors"</span>,
  <span class="hljs-attr">"items"</span>: [
      {<span class="hljs-attr">"name"</span>: <span class="hljs-string">"red"</span>, <span class="hljs-attr">"first"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"url"</span>: <span class="hljs-string">"#Red"</span>},
      {<span class="hljs-attr">"name"</span>: <span class="hljs-string">"green"</span>, <span class="hljs-attr">"link"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"url"</span>: <span class="hljs-string">"#Green"</span>},
      {<span class="hljs-attr">"name"</span>: <span class="hljs-string">"blue"</span>, <span class="hljs-attr">"link"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"url"</span>: <span class="hljs-string">"#Blue"</span>}
  ],
  <span class="hljs-attr">"empty"</span>: <span class="hljs-literal">true</span>
}
</code></pre>
<p>  Mustache引擎将如下呈现此数据：</p>
<pre><code class="lang-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Colors<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>red<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#Green"</span>&gt;</span>green<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#Blue"</span>&gt;</span>blue<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The list is empty.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</code></pre>
<p>  实际上，您在模板中没有看到任何“if”和“for”循环，但Mustache约定使得将提供的数据呈现为预期的HTML输出变得容易。 由MVC控制器根据模板的需求渲染数据，如格式化日期或货币值。</p>
<h4 id="toc_9">18.2.2.3. Mustache模板<a class="vnote-anchor" href="#toc_9" data-anchor-icon="#"></a></h4>
<p>  Mustache模板无逻辑语言有五种类型的标记：</p>
<ul>
<li>变量;</li>
<li>块;</li>
<li>反向块;</li>
<li>注释；</li>
<li>局部模版。</li>
</ul>
<p>  所有这些标签都用mustaches标识，即<code>{{{...}}</code>，在模板中找到的这些标识都将被解释为模板标记。 所有其他文本都被视为格式化文本，并在模板扩展时逐字输出。</p>
<table>
<thead>
<tr>
<th>标记</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{variable}}</td>
<td>将在当前上下文中递归地搜索变量名(可能有带点的名称)，如果找到，将被写成转义的HTML。<br>如果没有这样的键，就不会呈现任何内容。</td>
</tr>
<tr>
<td>{{{variable}}}<br>{{&amp; variable}}</td>
<td>将在当前上下文中递归搜索变量名，如果找到，将直接写入，不需要任何HTML转义。<br>如果没有这样的键，就不会呈现任何内容。</td>
</tr>
<tr>
<td>{{#section}}<br>...<br>{{/section}}</td>
<td>定义一个文本块，即<code>section</code>，并根据当前上下文中搜索到的<code>section</code>变量值进行呈现:<br>-如果section = false或list[]为空，则不会呈现整个块;<br>-如果section为非false但不是列表，它将用作块的单个呈现的上下文;<br>-如果section是一个非空列表，那么块中的文本将为列表中的每个项目呈现一次，即块的上下文将逐个迭代设置当前项目。</td>
</tr>
<tr>
<td>{{^section}}<br>...<br>{{/section}}</td>
<td>定义一个文本块，也就是反向section，并根据当前上下文搜索到的section变量的反向值来呈现:<br>-如果section = false或为空列表，将呈现整个block;<br>-如果section为非false或非空列表，它将不会被呈现。</td>
</tr>
<tr>
<td>{{! comment}}</td>
<td>注释文本将被忽略。</td>
</tr>
<tr>
<td>{{&gt;partial}}</td>
<td><code>partial</code>名称将在已注册的<code>partial</code>列表中搜索，然后在运行时使用当前执行上下文执行(因此可以使用递归部分)。</td>
</tr>
<tr>
<td>{{=...=}}</td>
<td>分隔符(即默认的{{…}})将被指定的字符替换(当文本中可能出现双大括号时，这可能很方便)。</td>
</tr>
</tbody>
</table>
<p>  除了那些标准标记之外，Mustache的mORMot实现还具有以下功能：</p>
<table>
<thead>
<tr>
<th>标记</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{helperName value}}</td>
<td>表达式助手，能够在呈现之前动态更改值。它可以用来根据<code>TDateTime</code>、<code>TTimeLog</code>值显示文本形式的日期。</td>
</tr>
<tr>
<td>{{.}}</td>
<td>这个伪变量引用上下文对象本身，而不是它的某个成员。这在遍历列表时特别有用。</td>
</tr>
<tr>
<td>{{-index}}</td>
<td>这个伪变量在遍历列表时返回当前项目编号，从1开始计数({{-index0}}}将从0开始计数)</td>
</tr>
<tr>
<td>{{#-first}}<br>...<br>{{/-first}}</td>
<td>定义的文本块(pseudo-section),它将呈现列表的首项，或者{{^-first}}反向呈现尾项</td>
</tr>
<tr>
<td>{{#-last}}<br>...<br>{{/-last}}</td>
<td>定义的文本块(pseudo-section),它将呈现列表的尾项，或者{{^-last}}反向呈现列表首项</td>
</tr>
<tr>
<td>{{#-odd}}<br>...<br>{{/-odd}}</td>
<td>定义的文本块(pseudo-section),它将遍历呈现并呈现奇数项，或者{{^-odd}}反向呈现偶数项，它对如交替行颜色显示一个列表等可能是非常有用的</td>
</tr>
<tr>
<td>{{&lt;partial}}<br>...<br>{{/partial}}</td>
<td>在当前模板的范围内定义一个内联的局部模版(稍后通过{{&gt;partial}}调用)</td>
</tr>
<tr>
<td>{{"some text}}</td>
<td>这个伪变量将把给定的文本提供给回调函数，回调函数在将文本输出之前转换其内容(如翻译)</td>
</tr>
</tbody>
</table>
<p>  这组标记可以轻松编写任何类型的内容，无需任何显式逻辑或嵌套代码。 作为一个主要的好处，模板内容可以编辑和验证，而无需任何Mustache编译器，因为所有这些<code>{{...}}</code>标记将非常清楚地标识最终的布局。</p>
<h5 id="toc_10">18.2.2.3.1. 变量<a class="vnote-anchor" href="#toc_10" data-anchor-icon="#"></a></h5>
<p>   典型的Mustache模板：</p>
<pre><code class="hljs">Hello {{name}}
You have just won {{value}} dollars!
Well, {{taxed_value}} dollars, after taxes.
</code></pre>
<p>   给出以下哈希：</p>
<pre><code class="lang-json hljs">{
  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Chris"</span>,
  <span class="hljs-attr">"value"</span>: <span class="hljs-number">10000</span>,
  <span class="hljs-attr">"taxed_value"</span>: <span class="hljs-number">6000</span>
}
</code></pre>
<p>   将产生以下内容：</p>
<pre><code class="hljs">Hello Chris
You have just won 10000 dollars!
Well, 6000 dollars, after taxes.
</code></pre>
<p>  您可以注意到默认情况下会为HTML转义{{variable}}标记。 这是强制性安全功能。 实际上，创建HTML文档的所有Web应用程序都容易受到跨站点脚本（XSS）攻击，除非插入到模板中的数据被适当地清理、转义。 使用Mustache，默认情况下会这样做。 当然，您可以使用<code>{{{variable}}}</code>或<code>{{＆variable}}</code>覆盖它并强制不转义值。</p>
<p>  例如：</p>
<table>
<thead>
<tr>
<th>模版</th>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>* {{name}}</code><br><code>* {{age}}</code><br><code>* {{company}}</code><br><code>* {{{company}}}</code></td>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"company": "&lt;b&gt;GitHub&lt;/b&gt;"</code><br><code>}</code></td>
<td><code>* Chris</code><br><code>*</code><br><code>*</code> <code>&amp;lt;b&amp;gt;GitHub&amp;lt;/b&amp;gt;</code><br><code>* &lt;b&gt;GitHub&lt;/b&gt;</code></td>
</tr>
</tbody>
</table>
<p>   变量使用可选的虚线语法解析当前上下文中的名称，例如：</p>
<table>
<thead>
<tr>
<th>模版</th>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>* {{people.name}}</code><br><code>* {{people.age}}</code><br><code>* {{people.company}}</code><br><code>* {{{people.company}}}</code></td>
<td><code>{</code><br><code>"people": {</code><br><code>"name":"Chris",</code><br><code>"company":"&lt;b&gt;GitHub&lt;/b&gt;"</code><br><code>}</code><br><code>}</code></td>
<td><code>* Chris</code><br><code>*</code><br><code>* &amp;lt;b&amp;gt;GitHub&amp;lt;/b&amp;gt;</code><br><code>* &lt;b&gt;GitHub&lt;/b&gt;</code></td>
</tr>
</tbody>
</table>
<h5 id="toc_11">18.2.2.3.2. 块<a class="vnote-anchor" href="#toc_11" data-anchor-icon="#"></a></h5>
<p>  块会一次或多次呈现文本块，具体取决于当前上下文中键值。</p>
<p>  在我们上面的“奖励模板”中，如果我们想要隐藏税务细节，会发生什么？</p>
<p>  在大多数脚本语言中，我们可以在模板中编写<code>if ...</code>块，这是Mustache避免的。，所以我们定义一个块，它将根据需要进行渲染。</p>
<p>  模板变为：</p>
<pre><code class="hljs">Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}
</code></pre>
<p>  在这里，我们创建了一个名为<code>in_ca</code>的块。</p>
<p>  给定<code>in_ca</code>的哈希值，将呈现该块，或者不呈现：</p>
<table>
<thead>
<tr>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"taxed_value": 6000,</code><br><code>"in_ca": true</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code><br><code>Well, 6000 dollars, after taxes.</code></td>
</tr>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"taxed_value": 6000,</code><br><code>"in_ca": false</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code></td>
</tr>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"taxed_value": 6000</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code></td>
</tr>
</tbody>
</table>
<p>  块还会更改其内部块的上下文。 这意味着块变量内容成为最顶层的上下文，用于标识任何提供的变量键。</p>
<p>  因此，以下上下文将完全有效：我们可以将<code>taxed_value</code>定义为<code>in_ca</code>的成员，并且它将直接呈现，因为它是新的上下文的一部分。</p>
<table>
<thead>
<tr>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"in_ca": {</code><br><code>"taxed_value": 6000</code><br><code>}</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code><br><code>Well, 6000 dollars, after taxes.</code></td>
</tr>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"taxed_value": 6000</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code></td>
</tr>
<tr>
<td><code>{</code><br><code>"name": "Chris",</code><br><code>"value": 10000,</code><br><code>"taxed_value": 3000,</code><br><code>"in_ca": {</code><br><code>"taxed_value": 6000</code><br><code>}</code><br><code>}</code></td>
<td><code>Hello Chris</code><br><code>You have just won 10000 dollars!</code><br><code>Well, 6000 dollars, after taxes.</code></td>
</tr>
</tbody>
</table>
<p>  在上面最新的上下文中，有两个<code>taxed_value</code>变量。 引擎将使用<code>in_ca</code>块中定义的上下文，即<code>in_ca.taxed_value</code>； 在根上下文（等于3000）中定义的那个被忽略。</p>
<p>  如果块名称指向的变量是列表，则块中的文本将针对列表中的每个项目呈现一次。 块的上下文将根据每次迭代的当前项进行设置。</p>
<p>  通过这种方式，我们可以循环集合。 Mustache允许任何深度的嵌套循环（如任何级别的主/详细信息）。</p>
<table>
<thead>
<tr>
<th>模版</th>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>{{#repo}}</code><br><code>&lt;b&gt;{{name}}&lt;/b&gt;</code><br><code>{{/repo}}</code></td>
<td><code>{</code><br><code>"repo": [</code><br><code>"name": "resque" ,</code><br><code>"name": "hub" ,</code><br><code>"name": "rip"</code><br><code>]</code><br><code>}</code></td>
<td><code>&lt;b&gt;resque&lt;/b&gt;</code><br><code>&lt;b&gt;hub&lt;/b&gt;</code><br><code>&lt;b&gt;rip&lt;/b&gt;</code></td>
</tr>
<tr>
<td><code>{{#repo}}</code><br><code>&lt;b&gt;{{.}}&lt;/b&gt;</code><br><code>{{/repo}}</code></td>
<td><code>{</code><br><code>"repo":</code><br><code>["resque", "hub", "rip"]</code><br><code>}</code></td>
<td><code>&lt;b&gt;resque&lt;/b&gt;</code><br><code>&lt;b&gt;hub&lt;/b&gt;</code><br><code>&lt;b&gt;rip&lt;/b&gt;</code></td>
</tr>
</tbody>
</table>
<p>  最新模板使用<code>{{.}}</code>伪变量，该变量允许呈现列表的当前项。</p>
<h5 id="toc_12">18.2.2.3.3. 反向块<a class="vnote-anchor" href="#toc_12" data-anchor-icon="#"></a></h5>
<p>  反向块在标准（非反向）块起始插入符号（^），可以根据键的反向值呈现文本。 也就是说，如果键不存在，为假，或者是空列表，则将呈现文本块。</p>
<p>  反向块通常在标准块之后定义，以便在标准块中不写入任何信息时呈现某些消息：</p>
<table>
<thead>
<tr>
<th>模版</th>
<th>上下文</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>{{#repo}}</code><br><code>&lt;b&gt;{{.}}&lt;/b&gt;</code><br><code>{{/repo}}</code><br><code>{{^repo}}</code><br><code>No repos :(</code><br><code>{{/repo}}</code></td>
<td><code>{</code><br><code>"repo":</code><br><code>[]</code><br><code>}</code></td>
<td><code>No repos :(</code></td>
</tr>
</tbody>
</table>
<h5 id="toc_13">18.2.2.3.4. 子模版<a class="vnote-anchor" href="#toc_13" data-anchor-icon="#"></a></h5>
<p>  <code>Partials</code>是某种外部子模板，可以包含在主模板中，如在几个地方遵循相同的渲染，就像代码中的函数一样，它们可以简化模板的可维护性并节省开发时间。</p>
<p>  子模版在运行时呈现（与编译时相反），因此子模版递归是可以的，但要避免无限循环，它们还继承了调用上下文，因此可以在列表块中轻松地重用，或者与纯变量一起使用。</p>
<p>  在实践中，子模版应与数据上下文一起提供，它们可被视为“模板上下文”。</p>
<p>  例如，此主模板通过{{&gt; user}}使用子模版：</p>
<pre><code class="hljs">&lt;h2&gt;Names&lt;/h2&gt;
{{#names}}
  {{&gt; user}}
{{/names}}
</code></pre>
<p>  将注册以下<code>"user"</code>模版：</p>
<pre><code class="hljs">&lt;strong&gt;{{name}}&lt;/strong&gt;
</code></pre>
<p>  可以视为如下被扩展为单个的模板：</p>
<pre><code class="hljs">&lt;h2&gt;Names&lt;/h2&gt;
{{#names}}
  &lt;strong&gt;{{name}}&lt;/strong&gt;
{{/names}}
</code></pre>
<p>  在mORMot的实现中，您还可以创建一些内部子模版，定义为{{&lt;partial}} ... {{/ partial}}伪块。 它可以减少维护多个模板文件的需要，并优化渲染布局。</p>
<p>  例如，可以重新定义先前的模板：</p>
<pre><code class="hljs">&lt;h2&gt;Names&lt;/h2&gt;
{{#names}}
  {{&gt;user}}
{{/names}}

{{&lt;user}}
&lt;strong&gt;{{name}}&lt;/strong&gt;
{{/user}}
</code></pre>
<p>  同一文件将定义子模板和主模板。请注意，我们在主模板之后定义了内部子模版，但我们可以在主模板逻辑中的任何位置定义它：在呈现主模板时忽略内部子模版定义，就像注释一样。</p>
<h4 id="toc_14">18.2.2.4. SynMustache单元<a class="vnote-anchor" href="#toc_14" data-anchor-icon="#"></a></h4>
<p>  作为我们的mORMot框架的一部分，我们在<code>SynMustache</code>单元中实现了优化的Mustache模板引擎：</p>
<ul>
<li>这是Mustache的第一个Delphi实现；</li>
<li>它有一个单独的解析器和渲染器（所以你可以提前编译你的模板）；</li>
<li>解析器具有已编译模板的共享缓存；</li>
<li>它通过了所有官方的Mustache规范测试，如http://github.com/mustache/spec中所定义，包括所有异常的空白处理；</li>
<li>外部子模版可以作为<code>TSynMustachePartials</code>字典提供；</li>
<li><code>{{.}}</code>、<code>{{-index}}</code>和<code>{{"some text}}</code>伪变量被添加到标准的Mustache语法中；</li>
<li><code>{{#-first}}</code>、<code>{{#-last}}</code>和<code>{{#-odd}}</code>伪块被添加到标准的Mustache语法中；</li>
<li>内部子模版可以通过{{&lt;partial}}定义，这也是Mustache标准语法的一个很好的补充；</li>
<li>它允许数据上下文以JSON或我们的<a href="">TDocVariant自定义变体类型</a>提供；</li>
<li>渲染期间几乎不执行任何内存分配；</li>
<li>它本身就是UTF-8，对任何字符串数据转换进行了优化；</li>
<li>性能已经在<code>SynCommons.pas</code>的优化代码中得到调整和强化；</li>
<li>每个解析的模板都是线程安全且可重用的；</li>
<li>它遵循开放/封闭原则，参见<a href="">SOLID设计原则</a>，以便可以定制和扩展过程的任何方面（如用于任何类型的数据上下文）；</li>
<li>它与我们的mORMot框架的其他模块完美集成，可以实现真正的基于<a href="">模型-视图-控制器</a>设计的动态网站，以及在Mustache中编写视图与其它关注点的完全分离，如控制器、基于接口的服务、模型等；</li>
<li>API灵活且易于使用。</li>
</ul>
<h5 id="toc_15">18.2.2.4.1. 变量<a class="vnote-anchor" href="#toc_15" data-anchor-icon="#"></a></h5>
<p>  现在，让我们来看一些代码。</p>
<p>  首先，我们定义需要的变量：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">var</span> mustache: TSynMustache;
    doc: variant;
</code></pre>
<p>  要解析模板，您只需要调用：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(
    <span class="hljs-string">'Hello {{name}}'</span><span class="hljs-string">#13#10</span><span class="hljs-string">'You have just won {{value}} dollars!'</span>);
</code></pre>
<p>  它将返回模板的编译实例。</p>
<p>   <code>Parse()</code>类方法将使用共享缓存，因此完成后不需要释放<code>mustache</code>实例：无需编写<code>try ... finally mustache.Free; end</code>块。</p>
<p>  您可以使用<code>TDocVariant</code>来提供上下文数据（使用后期绑定）：</p>
<pre><code class="lang-pascal hljs">  TDocVariant.New(doc);
  doc.<span class="hljs-keyword">name</span> := <span class="hljs-string">'Chris'</span>;
  doc.value := <span class="hljs-number">10000</span>;
</code></pre>
<p>  作为替代方案，您也可以使用如下方式定义上下文数据：</p>
<pre><code class="lang-pascal hljs">  doc := _ObjFast([<span class="hljs-string">'name'</span>,<span class="hljs-string">'Chris'</span>,<span class="hljs-string">'value'</span>,<span class="hljs-number">1000</span>]);
</code></pre>
<p>  现在，您可以使用此上下文渲染模板：</p>
<pre><code class="lang-pascal hljs">  html := mustache.Render(doc);
  <span class="hljs-comment">// now html='Hello Chris'#13#10'You have just won 10000 dollars!'</span>
</code></pre>
<p>  如果要将上下文数据作为JSON提供，然后渲染它，您可以写：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(
    <span class="hljs-string">'Hello {{value.name}}'</span><span class="hljs-string">#13#10</span><span class="hljs-string">'You have just won {{value.value}} dollars!'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{value:{name:"Chris",value:10000}}'</span>);
  <span class="hljs-comment">// now html='Hello Chris'#13#10'You have just won 10000 dollars!'</span>
</code></pre>
<p>  请注意，这里，JSON提供了类似MongoDB的扩展语法（即字段名称不加引号），并且<code>TSynMustache</code>能够在执行上下文中标识句点命名的变量。</p>
<p>  作为替代方案，您可以使用以下语法将数据上下文创建为JSON，并使用一组参数，因此更容易在实际代码中使用存储数据的变量（例如，任何字符串变量都按照JSON的预期引用， 并转换为UTF-8）：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(
    <span class="hljs-string">'Hello {{name}}'</span><span class="hljs-string">#13#10</span><span class="hljs-string">'You have just won {{value}} dollars!'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{name:?,value:?}'</span>,[],[<span class="hljs-string">'Chris'</span>,<span class="hljs-number">10000</span>]);
  html=<span class="hljs-string">'Hello Chris'</span><span class="hljs-string">#13#10</span><span class="hljs-string">'You have just won 10000 dollars!'</span>
</code></pre>
<p>  您可以在<code>mORMot.pas</code>单元中找到<code>ObjectToJSON(0</code>函数，该函数能够将任何<code>TPersistent</code>实例转换为有效的JSON内容，随时可以提供给TSynMustache编译实例。</p>
<p>  如果对象的发布属性具有一些<code>getter</code>函数，则它们将被动态调用以处理数据（例如，通过连接<code>'FirstName Name'</code>两个子字段作为<code>FullName</code>返回）。</p>
<h5 id="toc_16">18.2.2.4.2. 块<a class="vnote-anchor" href="#toc_16" data-anchor-icon="#"></a></h5>
<p>   按预期处理块：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(<span class="hljs-string">'Shown.{{#person}}As {{name}}!{{/person}}end{{name}}'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{person:{age:?,name:?}}'</span>,[<span class="hljs-number">10</span>,<span class="hljs-string">'toto'</span>]);
  <span class="hljs-comment">// now html='Shown.As toto!end'</span>
</code></pre>
<p>  请注意，这些部分会更改数据上下文，因此在<code>#person</code>块中，您可以直接访问数据上下文<code>person</code>成员，即直接写<code>{{name}}</code></p>
<p>  它还支持反向块：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(<span class="hljs-string">'Shown.{{^person}}Never shown!{{/person}}end'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{person:true}'</span>);
  <span class="hljs-comment">// now html='Shown.end'</span>
</code></pre>
<p>  要呈现项目列表，您可以使用<code>{{.}}</code>伪变量：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(<span class="hljs-string">'{{#things}}{{.}}{{/things}}'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{things:["one", "two", "three"]}'</span>);
  <span class="hljs-comment">// now html='onetwothree'</span>
</code></pre>
<p>  <code>{{-index}}</code>伪变量允许在渲染时对列表项进行计算：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(
    <span class="hljs-string">'My favorite things:'</span>#$A<span class="hljs-string">'{{#things}}{{-index}}. {{.}}'</span>#$A<span class="hljs-string">'{{/things}}'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{things:["Peanut butter", "Pen spinning", "Handstands"]}'</span>);
  <span class="hljs-comment">// now html='My favorite things:'#$A'1. Peanut butter'#$A'2. Pen spinning'#$A+</span>
  <span class="hljs-comment">//          '3. Handstands'#$A,'-index pseudo variable'</span>
</code></pre>
<h5 id="toc_17">18.2.2.4.3. 子模版<a class="vnote-anchor" href="#toc_17" data-anchor-icon="#"></a></h5>
<p>  可以使用<code>TSynMustachePartials</code>定义外部子模版（即标准的Mustache子模版）。 您可以定义和维护<code>TSynMustachePartials</code>实例的列表，也可以对给定的呈现使用一次性子模版，如下所示：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(<span class="hljs-string">'{{&gt;partial}}'</span>#$A<span class="hljs-string">'3'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{}'</span>,TSynMustachePartials.CreateOwned([<span class="hljs-string">'partial'</span>,<span class="hljs-string">'1'</span>#$A<span class="hljs-string">'2'</span>]));
  <span class="hljs-comment">// now html='1'#$A'23','external partials'</span>
</code></pre>
<p>  这里<code>TSynMustachePartials.CreateOwned()</code>期望为子模版提供名/值对。</p>
<p>  内部子模版（SynMustache扩展之一）可以直接在主模板中定义：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(<span class="hljs-string">'{{&lt;partial}}1'</span>#$A<span class="hljs-string">'2{{name}}{{/partial}}{{&gt;partial}}4'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{name:3}'</span>);
  <span class="hljs-comment">// now html='1'#$A'234','internal partials'</span>
</code></pre>
<h5 id="toc_18">18.2.2.4.4. 表达式助手<a class="vnote-anchor" href="#toc_18" data-anchor-icon="#"></a></h5>
<p>   表达式助手是Mustache标准定义的扩展。它们允许定义您自己的一组函数，这些函数将在渲染过程中调用，以将一个值从上下文转换为要渲染的值。</p>
<p>  <code>TSynMustache.HelpersGetStandardList</code>将返回标准静态助手列表，能够将<code>TDateTime</code>或<code>TTimeLog</code>值转换为文本，或将任何值转换为JSON表示。当前的注册助手列表是<code>DateTimeToText</code>，<code>DateToText</code>，<code>DateFmt</code>，<code>TimeLogToText</code>，<code>BlobToBase64</code>，<code>JSONQuote</code>，<code>JSONQuoteURI</code>，<code>ToJSON</code>，<code>EnumTrim</code>，<code>EnumTrimRight</code>，<code>PowerOfTwo</code>，<code>Equals</code>，<code>If</code>和<code>WikiToHtml</code>。例如，<code>{{TimeLogToText CreatedAt}}</code>将<code>TCreateTime</code>字段值转换为待显示的文本。</p>
<p>  mustache标记语法是<code>{{helpername value}}</code>。提供的value参数可以是当前上下文中的变量名，也可以是常数（<code>{{helpername 123}}</code>），常量JSON字符串（<code>{{helpername "constant text"}}</code>），JSON数组（<code>{ {helpername [1,2,3]}}</code>）或JSON对象（<code>{{helpername {name:"john",age:24}}}</code>）。该值也可以是一个逗号分隔的集合值，它将被转换为相应的JSON数组，这些值是从当前上下文中提取的，如<code>{{DateFmt DateValue,"dd/mm/yyy"}}</code>。</p>
<p>  您可以递归调用助手，就像嵌套函数一样：<code>{{helper1 helper2 value}}</code>将使用提供的值调用<code>helper2</code>，该结果将作为值传递给<code>helper1</code>。</p>
<p>   您可以通过<code>TSynMustache.HelperAdd</code>方法创建并注册自己的表达式助手列表，甚至包括一些业务逻辑，以便在渲染过程中计算任何数据。</p>
<p>  助手可以用这样的方法实现：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">class</span> <span class="hljs-function"><span class="hljs-keyword">procedure</span> <span class="hljs-title">TSynMustache</span>.<span class="hljs-title">JSONQuote</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Value: variant; <span class="hljs-keyword">out</span> result: variant)</span>;</span>
<span class="hljs-keyword">var</span> json: RawUTF8;
<span class="hljs-keyword">begin</span>
  QuotedStrJSON(VariantToUTF8(Value),json);
  RawUTF8ToVariant(json,result);
<span class="hljs-keyword">end</span>;
</code></pre>
<p>  这里，提供的Value参数将来自上下文的变量，或来自JSON数字，字符串，数组或对象的常量，编码为<code>TDocVariant</code>自定义变体类型。</p>
<p>  如果参数以逗号分隔列表的形式提供，您可以编写多参数函数：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">class</span> <span class="hljs-function"><span class="hljs-keyword">procedure</span> <span class="hljs-title">TSynMustache</span>.<span class="hljs-title">DateFmt</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Value: variant; <span class="hljs-keyword">out</span> result: variant)</span>;</span>
<span class="hljs-keyword">begin</span>
  <span class="hljs-keyword">with</span> _Safe(Value)^ <span class="hljs-keyword">do</span>
    <span class="hljs-keyword">if</span> (Kind=dvArray) <span class="hljs-keyword">and</span> (Count=<span class="hljs-number">2</span>) <span class="hljs-keyword">and</span> (TVarData(Values[<span class="hljs-number">0</span>]).VType=varDate) <span class="hljs-keyword">then</span>
      result := FormatDateTime(Values[<span class="hljs-number">1</span>],TVarData(Values[<span class="hljs-number">0</span>]).VDate) <span class="hljs-keyword">else</span>
      SetVariantNull(result);
<span class="hljs-keyword">end</span>;
</code></pre>
<p>  所以你可以这样使用这样的表达式助手：</p>
<pre><code class="hljs"> La date courante en France est : {{DateFmt DateValue,"dd/mm/yyyy"}}
</code></pre>
<p>  <code>Equals</code>助手定义如下：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">class</span> <span class="hljs-function"><span class="hljs-keyword">procedure</span> <span class="hljs-title">TSynMustache</span>.<span class="hljs-title">Equals_</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Value: variant; <span class="hljs-keyword">out</span> result: variant)</span>;</span>
<span class="hljs-keyword">begin</span> <span class="hljs-comment">// {{#Equals .,12}}</span>
  <span class="hljs-keyword">with</span> _Safe(Value)^ <span class="hljs-keyword">do</span>
    <span class="hljs-keyword">if</span> (Kind=dvArray) <span class="hljs-keyword">and</span> (Count=<span class="hljs-number">2</span>) <span class="hljs-keyword">and</span>
       (SortDynArrayVariant(Values[<span class="hljs-number">0</span>],Values[<span class="hljs-number">1</span>])=<span class="hljs-number">0</span>) <span class="hljs-keyword">then</span>
      result := true <span class="hljs-keyword">else</span>
      SetVariantNull(result);
<span class="hljs-keyword">end</span>;
</code></pre>
<p>  您可以在模板中使用它来提供其他视图逻辑：</p>
<pre><code class="hljs">{{#Equals Category,"Admin"}}
Welcome, Mister Administrator!
{{/Equals Category,"Admin"}}
</code></pre>
<p>  块结尾可以选择只包含助手程序名称，因此以下语法也是正确的，并且可能不太容易出错：</p>
<pre><code class="hljs">{{#Equals Category,"Admin"}}
Welcome, Mister Administrator!
{{/Equals}}
</code></pre>
<p>  <code>#If</code>助手更强大，因为它允许定义一些视图逻辑，通过在两个值之间设置<code>= &lt;&gt; &lt;=&gt; = &lt;&gt;</code>运算符：</p>
<pre><code class="hljs">{{#if .,"=",6}} Welcome, number six! {{/if}}
{{#if Total,"&gt;",1000}} Thanks for your income: your loyalty will be rewarded. {{/if}}
{{#if info,"&lt;&gt;",""}} Warning: {{info}} {{/if}}
</code></pre>
<p>  作为替代方案，您可以放置运算符而不使用字符串参数：</p>
<pre><code class="hljs">{{#if .=6}} Welcome, number six! {{/if}}
{{#if Total&gt;1000}} Thanks for your income: your loyalty will be rewarded. {{/if}}
{{#if info&lt;&gt;""}} Warning: {{info}} {{/if}}
</code></pre>
<p>  这种最新的语法可能非常方便。 当然，由于Mustache是一个无逻辑的模板引擎，在大多数情况下最好不要使用<code>#if</code>助手，而是在提供的数据上下文中添加一些专用标志：</p>
<pre><code class="hljs">{{#isNumber6}} Welcome, number six! {{/isNumber6}}
{{#showLoyaltyMessage}} Thanks for your income: your loyalty will be rewarded. {{/#showLoyaltyMessage}}
{{#showWarning}} Warning: {{info}} {{/#showWarning}}
</code></pre>
<p>  该框架还提供了一些与其ORM绑定的内置可选助手，如果您使用<code>mORMotMVC.pas</code>创建MVC Web应用程序，您可以注册一组表达式助手，让您的Mustache视图从其中检索给定ID的<code>TSQLRecord</code>，或在自动生成的表中显示给定的实例字段。</p>
<p>  例如，你可以写：</p>
<pre><code class="lang-pascal hljs">aMVCMustacheView.RegisterExpressionHelpersForTables(aRestServer,[TSQLMyRecord]);
</code></pre>
<p>  这将为指定的表定义两个表达式助手：</p>
<ul>
<li>任何<code>{{#TSQLMyRecord MyRecordID}} ... {{/TSQLMyRecord MyRecordID}}</code>Mustache标记将从提供的ID值读取<code>TSQLMyRecord</code>，并将其字段放在当前渲染数据上下文中，准备在视图中显示。</li>
<li>任何<code>{{TSQLMyRecord.HtmlTable MyRecord}}</code>Mustache标记，它将创建一个HTML表，其中包含所提供的<code>MyRecord</code>字段的所有信息（来自当前数据上下文），具有复杂的字段处理（如<code>TDateTime</code>，<code>TTimeLog</code>，集或枚举），以及正确的显示字段名称（和i18n）。</li>
</ul>
<h5 id="toc_19">18.2.2.4.5. 国际化<a class="vnote-anchor" href="#toc_19" data-anchor-icon="#"></a></h5>
<p>  您可以在模板中定义<code>{{"some text}}</code>伪变量，这些文本将提供给回调，随时可以进行转换：它可能对i18n的Web应用程序很方便。</p>
<p>  默认情况下，文本将直接写入输出缓冲区，但您可以定义一个可以使用的回调，例如， 用于文本翻译：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-function"><span class="hljs-keyword">procedure</span> <span class="hljs-title">TTestLowLevelTypes</span>.<span class="hljs-title">MustacheTranslate</span><span class="hljs-params">(<span class="hljs-keyword">var</span> English: <span class="hljs-keyword">string</span>)</span>;</span>
<span class="hljs-keyword">begin</span>
  <span class="hljs-keyword">if</span> English=<span class="hljs-string">'Hello'</span> <span class="hljs-keyword">then</span>
    English := <span class="hljs-string">'Bonjour'</span> <span class="hljs-keyword">else</span>
  <span class="hljs-keyword">if</span> English=<span class="hljs-string">'You have just won'</span> <span class="hljs-keyword">then</span>
    English := <span class="hljs-string">'Vous venez de gagner'</span>;
<span class="hljs-keyword">end</span>;
</code></pre>
<p>  当然，在实际应用程序中，您可以分配一个TLanguageFile.Translate（var English：string）方法，如<code>mORMoti18n.pas</code>单元中所定义。</p>
<p>  然后，您将能够如此定义模板：</p>
<pre><code class="lang-pascal hljs">  mustache := TSynMustache.Parse(
    <span class="hljs-string">'{{"Hello}} {{name}}'</span><span class="hljs-string">#13#10</span><span class="hljs-string">'{{"You have just won}} {{value}} {{"dollars}}!'</span>);
  html := mustache.RenderJSON(<span class="hljs-string">'{name:?,value:?}'</span>,[],[<span class="hljs-string">'Chris'</span>,<span class="hljs-number">10000</span>],<span class="hljs-keyword">nil</span>,MustacheTranslate);
  <span class="hljs-comment">// now html='Bonjour Chris'#$D#$A'Vous venez de gagner 10000 dollars!'</span>
</code></pre>
<p>  所有文本确实已按预期翻译。</p>
<h4 id="toc_20">18.2.2.5. 与基于方法的服务集成<a class="vnote-anchor" href="#toc_20" data-anchor-icon="#"></a></h4>
<p>  您可以轻松地将Mustache模板引擎与框架的ORM集成。 要避免任何不必要的临时转换，可以使用<code>TSQLRest.RetrieveDocVariantArray()</code>方法，并将其<code>TDocVariant</code>结果作为<code>TSynMustache.Render()</code>的数据上下文提供。</p>
<p>  例如，您可以使用任何基于方法的服务编写：</p>
<pre><code class="lang-pascal hljs"><span class="hljs-keyword">var</span> template: TSynMustache;
    html: RawUTF8;
 ...
  template := TSynMustache.Parse(
    <span class="hljs-string">'&lt;ul&gt;{{#items}}&lt;li&gt;{{Name}} was born on {{BirthDate}}&lt;/li&gt;{{/items}}&lt;/ul&gt;'</span>);
  html := template.Render(
    aClient.RetrieveDocVariantArray(TSQLBaby,<span class="hljs-string">'items'</span>,<span class="hljs-string">'Name,BirthDate'</span>));
  <span class="hljs-comment">// now html will contain a ready-to-be-displayed unordered list</span>
</code></pre>
<p>  当然，此<code>TSQLRest.RetrieveDocVariantArray()</code>方法接受可选的WHERE子句，以根据您的需要使用。 您甚至可以使用分页来将列表拆分成较小的部分。</p>
<p>  在这种基于方法的低级服务流程之后，您可以使用mORMot轻松创建高性能Web服务器，遵循MVC模式：</p>
<table>
<thead>
<tr>
<th>MVC</th>
<th>mORMot</th>
</tr>
</thead>
<tbody>
<tr>
<td>Model</td>
<td><a href="">对象关系映射(ORM)</a>及其TSQLModel/TSQLRecord定义</td>
</tr>
<tr>
<td>View</td>
<td>Mustache模板引擎<br>(可存储为独立文件或存储在数据库中)</td>
</tr>
<tr>
<td>Controller</td>
<td>基于方法的服务，请参阅<a href="">基于方法的客户端-服务端服务</a></td>
</tr>
</tbody>
</table>
<p>  但是，仍然需要很多代码来粘合MVC部件。</p>
<h4 id="toc_21">18.2.2.6. MVC/MVVM设计<a class="vnote-anchor" href="#toc_21" data-anchor-icon="#"></a></h4>
<p>  实际上，基于方法的服务MVC模式很难使用，你自己有很多代码工程，例如： 参数编码，渲染或路由。</p>
<p>  <code>mORMotMVC.pas</code>单元提供了一个真正的MVVM（Model View ViewModel）设计，更高级，它依赖于接口定义来构建应用程序：</p>
<table>
<thead>
<tr>
<th>MVC</th>
<th>mORMot</th>
</tr>
</thead>
<tbody>
<tr>
<td>Model</td>
<td><a href="">对象关系映射(ORM)</a>及其TSQLModel/TSQLRecord定义</td>
</tr>
<tr>
<td>View</td>
<td>Mustache模板引擎<br>(可存储为独立文件或存储在数据库中)</td>
</tr>
<tr>
<td>ViewModel</td>
<td>接口服务，请参见<a href="">基于接口的客户端-服务端服务</a></td>
</tr>
</tbody>
</table>
<p>  在MVVM模式中，Model和View组件都与经典的<code>Model-View-Controller</code>布局相匹配。 但ViewModel将定义某种“视图模型”，即从视图中发送和检索数据上下文。</p>
<p>  在mORMot实现中，接口方法用于定义任何请求的执行上下文，遵循我们框架的约定优于配置的约定。</p>
<p>  实际上，使用以下约定定义ViewModel：</p>
<table>
<thead>
<tr>
<th>ViewModel</th>
<th>mORMot</th>
</tr>
</thead>
<tbody>
<tr>
<td>Route</td>
<td>使用接口名和方法名</td>
</tr>
<tr>
<td>Command</td>
<td>由方法名定义</td>
</tr>
<tr>
<td>Controller</td>
<td>由方法实现定义</td>
</tr>
<tr>
<td>ViewModel上下文</td>
<td>以JSON形式传输，包括复杂值，如<code>TSQLRecord</code>、记录、动态数组或变体(包括<code>TDocVariant</code>)</td>
</tr>
<tr>
<td>Input上下文</td>
<td>作为方法输入参数(<code>const</code>/<code>var</code>)从视图传输</td>
</tr>
<tr>
<td>Output上下文</td>
<td>将方法输出参数(<code>var</code>/<code>out</code>)发送到视图</td>
</tr>
<tr>
<td>Actions</td>
<td>使用方法输出参数渲染相关视图，或使用另一个命令(可选的<code>EMVCApplication</code>)</td>
</tr>
</tbody>
</table>
<p>  这可能看起来很不寻常（如果您来自RubyOnRails，AngularJS，Meteor或.Net实现），它已被确定为非常便于使用。主要好处是您不需要为ViewModel层显示定义数据结构。方法参数将在接口级别为您声明执行上下文，并在<code>TMVCApplication</code>类中实现。实际上，此实现使用接口输入和输出参数是定义AngularJS应用程序的<code>$scope</code>内容的另一种方法。</p>
<p>  ViewModel数据上下文作为JSON内容传输的事实，正如REST表示形式，可以产生很好的附加作用：</p>
<ul>
<li>视图对执行上下文一无所知，因此与各种业务逻辑分离，这将增强应用程序的安全性和可维护性；</li>
<li>您可以选择实时查看正在运行的应用程序的JSON数据上下文（使用伪<code>root/methodname/json</code>URI），以便更轻松地调试Controller或Views；</li>
<li>您可以使用伪静态JSON内容测试任何View，而无需真正的服务；</li>
<li>事实上，Views甚至可以不依赖于Web模型，而是运行在经典的富应用程序中，使用VCL/FMX用户界面（我们仍然需要自动化绑定到UI组件的过程，但这在技术上是可行的，而几乎没有其他MVC Web框架支持这种方式）;</li>
<li>由于接口用于定义Controller，您可以mock和stub它们，用于正确的单元测试；</li>
<li>在Controller代码中，您可以访问mORMot ORM方法和服务来编写各种命令，从而可以非常轻松地实现任何SOA项目的Web前端（也可以共享许多高级域类型）；</li>
<li>关联数据模型是mORMot的ORM，它也针对JSON处理进行了优化，因此在渲染过程中大部分内存碎片都减少到最小（参见下面的RawJSON的使用）;</li>
<li>Controller将大部分时间托管在Web服务器应用程序中，但可以物理托管在另一个远程进程中，这个远程控制器服务甚至可以在Web和VCL/FMX客户端之间共享；</li>
<li>可以基于JSON内容实现多级缓存，以利用服务器资源并扩展到大量客户端。</li>
</ul>
<p>  下一章将介绍如何使用mORMot构建此类可靠的MVC/MVVM Web应用程序。</p>

    </div>
</div>
</div>

<div id="container-floating" style="display:none;" class="d-none d-md-block d-xl-block">
    <div id="floating-button" onclick="toggleMore()">
        <p id="floating-more" class="more">&gt;</p>
    </div>
</div>

<!--
<div class="footer" id="vnote-footer">
    <p>Generated by <em><a href="https://tamlok.github.io/vnote/">VNote</a></em>.</p>
</div>
-->
</body>
</html>
